<template>
  <div>
    <Row type="flex" justify="center" align="bottom">
      <!-- <i-col :span="7">
        <Button type="info" shape="circle" icon="md-log-out" @click="logout">退出</Button>
      </i-col> -->
      <i-col :span="10" :offset="7" style="height:64px;line-height:64px;">
        <div class="layout-title">视频图像质量实时检测系统</div>
      </i-col>
      <i-col :span="7">
        <Menu mode="horizontal" :active-name="$route.name" @on-select="handleMenu">
          <div class="layout-nav">
            <MenuItem name="intergrity">
              <!-- <Icon type="md-home" /> -->
              <Icon type="md-stats" />视频检测
            </MenuItem>
            <MenuItem name="videocontent">
              <Icon type="md-alert" />视频内容分析
            </MenuItem>
            <MenuItem name="monitorcheck">
              <Icon type="md-videocam" />摄像头检测
            </MenuItem>
          </div>
        </Menu>
      </i-col>
    </Row>
    <Alert :isAlertVisible="isAlertVisible" :alertMsg="alertMsg" @alertCancel="isAlertVisible = false" @alertConfirm="confirmLogout" :isLogin="false"></Alert>
  </div>
</template>

<script>
import { mapState } from "vuex";
import constData from "@/util/constData2";
import { mapActions } from "vuex";
import Alert from "../../components/Alert/Alert.vue";
import {reqLogout} from "../../api"
export default {
  components: {
    Alert
  },
  data() {
    return {
      // stationList: constData.stationList,
      // stationName: ''
      isLogin: false,
      alertMsg: "",
      isAlertVisible: false
    };
  },
  computed: {
    ...mapState(["selectedDateTime"]),
  },
  created() {},
  mounted() {
    // console.log(this.$route.name);
  },
  methods: {
    ...mapActions(["handleLogout"]),
    handleMenu(name) {
      // 编程式导航跳转
      // console.log("处理路由", name);
      // 点击导航菜单时分别向对应界面传递站点参数
      if (name === "intergrity") {
        this.$router.push({
          name: "intergrity",
        });
      } else if (name === "videocontent") {
        this.$router.push({ name: "videocontent"});
      } else if (name === "monitorcheck") {
        this.$router.push({ name: "monitorcheck"});
      }
    },
    logout() {
      this.alertMsg = "确认执行此操作？";
      this.isAlertVisible = true;
    },
    async confirmLogout() {
      let params={}
      let result = await reqLogout(params)
      if(result.code === 6000)
      {
        let userinfo= null
        this.handleLogout(userinfo)
        this.$router.replace({name:'login'})
      }
      this.isAlertVisible = false 
    }
  }
};
</script>

<style lang="less">
.ivu-menu-horizontal {
  height: 0rem !important;
  line-height: 3rem !important;
}
.ivu-menu-horizontal.ivu-menu-light:after {
  height: 0rem !important;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active {
  color: #fff !important;
  background-color: #1081b3;
}
.ivu-layout-header {
  background-color: #01237c !important;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  // position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-title {
  // width: 600px;
  height: 64px;
  line-height: 64px;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  color: #4bdaff;
  border-radius: 0.3rem;
  // float: left;
  // position: relative;
  // top: 1.5rem;
  border-bottom: 0.2rem solid #4bdaff;
  // left: 0px;
}
.ivu-menu-item,
.ivu-menu-submenu {
  color: #fff !important;
  font-weight: bold;
  font-size: 1.4rem !important;
}
.analysis-submenu .analysis-submenu-item.ivu-menu-item-active,
.analysis-submenu-item:hover {
  background: none !important;
  color: #4bdaff !important;
}
.layout-nav {
  // width: 82rem;
  height: 3rem;
  padding-left: 3rem;
  margin: 0 auto;
  // float: right;
}
</style>
